<template>
    <div>
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <span :class="['mui-control-item',item.id == 0 ? 'mui-active' :'']" data-wid="tab-top-subpage-1.html" v-for="item in classlist" :key="item.id" @click.prevent="getphotolist(item.id)">
                        {{item.title}}
                    </span>
                </div>
            </div>
        </div>
        <!--  -->
        <ul class="photo-list">
            <router-link :to="'/home/photoinfo/' + item.id" v-for="item in photolist" :key="item.id">
                <img v-lazy="item.img_url">
                <div class="info-box">
                    <p class="info-title">{{item.title}}</p>
                    <p class="info-body">{{item.zhaiyao}}</p>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
// 引入
import { Toast } from 'mint-ui';
import mui from '../../lib/mui/js/mui.min.js';

mui('body').on('tap','a',function(){document.location.href=this.href;});
// mui('body').on('click','a',function(){document.location.href=this.href;});

export default {
    data() {
        return {
            classlist: [],
            photolist: [],
        }
    },
    methods: {
        // 获取分类列表
        getphotoclass(){
            this.$http.get('api/getimgcategory').then(res => {
                if(res.body.status == 0){
                    // 手动添加一个 剔除 1-3 个
                    res.body.message.unshift({title: '全部',id: 0});
                    this.classlist = res.body.message;
                    this.classlist.splice(1,3);
                }else{
                    Toast('获取图片分类失败');
                }
            })
        },
        // 获取图片列表
        getphotolist(id){
            //console.log(id); // 将当前分类的id传过来
            this.$http.get('api/getimages/' + id).then(res => {
               if(res.body.status == 0){
                    // console.log(res.body.message);
                    this.photolist = res.body.message;
                }else{
                    Toast('获取图片列表失败');
                } 
            })
        }
    },
    created() {
        this.getphotoclass();
        this.getphotolist(0);
    },
    mounted() {
        // 如果要操作元素了，最早在mounted里面，这里时候的DOM元素是最新的，刚被挂载到DOM上
        mui(".mui-scroll-wrapper").scroll({
            deceleration: 0.0005
        });
    },
}

</script>

<style lang="less" scoped>
    .photo-list{
        list-style: none;
        padding: 10px 10px 0;
        margin: 0;
        a{
            display: block;
            background: #ccc;
            text-align: center;
            margin-bottom: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            position: relative;
            img{
                width: 100%;
                vertical-align: bottom;
            }
            img[lazy=loading] {
                width: 40px;
                height: 340px;
                margin: auto;
            }
            .info-box{
                position: absolute;
                bottom: 0;
                left: 0;
                background: rgba(0,0,0,0.3);
                padding: 0 5px;
                .info-title{
                    width: 100%;
                    color: #fff;
                    font-size: 14px;
                    line-height: 30px;
                    margin-bottom: 0;
                    
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    text-align: left;
                }
                .info-body{
                    color: #fff;
                    font-size: 12.5px;

                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    text-align: left
                }
            }
        }
    }
</style>